<template>
  <button :type="type" :class="classname">
    <slot></slot>
  </button>
</template>
<script>
/*
<Button theme="primary" size="large">
=>
<button class="btn btn-block btn-primary"></button>
btn-lg
*/
  
import classNames from '../classnames.js'; 
  
export default {
  props: {
    theme: {
      type: String,			
      default:"default"
    },
    size: {
      type: String,				
      default:"normal"
    },
    type: {
      type: String,				
      default:"button"
    }
  },	
  computed: {
    classname: function () {
      let style = "btn-"+this.theme;
      let size = 'btn';      
      let sourceMap = {
          normal: '',        
          large: '-lg',
          small: '-sm',
          xsmall: '-xs',
          flat: '-flat'
      };
      
      if (sourceMap.hasOwnProperty(this.size)) {
          size = size+sourceMap[this.size];
      } 
      if(this.$el.hasAttribute("block")) {
        return classNames("btn",style,size,"btn-block"); 
      } else {
        return classNames("btn",style,size); 
      }           
    }
  }
}
</script>       

